<template>
  <div class="related-articles">
    <div class="section-header" @click="toggleRelated">
      <h4 class="section-title">
        <el-icon><Collection /></el-icon>
        相关推荐
        <span class="article-count">({{ articles.length }})</span>
      </h4>
      <el-icon class="toggle-icon" :class="{ expanded: isExpanded }">
        <ArrowDown />
      </el-icon>
    </div>

    <div v-show="isExpanded" class="articles-list">
      <div
        v-for="article in articles"
        :key="article.id"
        class="article-item"
        @click="handleArticleClick(article.id, $event)"
      >
        <div class="article-content">
          <h5 class="article-title">{{ article.title }}</h5>

          <div class="article-meta">
            <span class="view-count">
              {{ formatNumber(article.viewCount) }}阅读
            </span>
            <span class="separator">•</span>
            <span class="like-count">
              {{ formatNumber(article.likeCount) }}点赞
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Collection, ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { UserArticleUtils, type RelatedArticleInfo } from "@/api/user-article";

defineOptions({
  name: "RelatedArticles"
});

interface Props {
  articles: RelatedArticleInfo[];
}

defineProps<Props>();

const router = useRouter();

// 响应式数据
const isExpanded = ref(false); // 移动端默认收起

const formatNumber = UserArticleUtils.formatNumber;

// 切换展开/收起状态
const toggleRelated = () => {
  isExpanded.value = !isExpanded.value;
};

// 为不同的推荐文章生成不同颜色的图标
const getIconColor = (index: number): string => {
  const colors = [
    "#ff6b6b", // 红色
    "#4ecdc4", // 青色
    "#45b7d1", // 蓝色
    "#96ceb4", // 绿色
    "#feca57", // 黄色
    "#ff9ff3", // 粉色
    "#54a0ff", // 浅蓝色
    "#5f27cd" // 紫色
  ];
  return colors[index % colors.length];
};

const handleArticleClick = (articleId: number, event?: Event) => {
  // 阻止默认行为和事件冒泡
  if (event) {
    event.preventDefault();
    event.stopPropagation();
  }

  console.log("🔗 点击相关文章，准备在新标签页打开:", articleId);

  // 以新标签页打开文章详情，符合主流论坛交互习惯
  const route = router.resolve(`/user/article/${articleId}`);
  // 使用完整URL，确保 Hash 模式路由正确解析
  const fullUrl =
    window.location.origin + window.location.pathname + route.href;
  console.log("🔗 完整URL:", fullUrl);

  const newWindow = window.open(fullUrl, "_blank");

  if (!newWindow) {
    console.warn("⚠️ 浏览器阻止了弹出窗口，尝试使用 router.push");
    router.push(`/user/article/${articleId}`);
  } else {
    console.log("✅ 成功在新标签页打开相关文章");
  }
};

// 生命周期
onMounted(() => {
  // 桌面端默认展开，移动端默认收起
  const isMobile = window.innerWidth <= 767;
  isExpanded.value = !isMobile;
});
</script>

<style lang="scss" scoped>
@use "@/styles/user-theme.scss" as *;

.related-articles {
  display: flex;
  flex-direction: column;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  transition: box-shadow 0.2s ease;

  // 移动端适配
  @media screen and (width <= 999px) {
    .section-header {
      padding: 12px 16px;

      .section-title {
        font-size: 16px;

        .el-icon {
          font-size: 16px;
        }

        .article-count {
          font-size: 10px;
        }
      }

      .toggle-icon {
        font-size: 12px;
      }
    }

    .articles-list {
      max-height: 200px;
      padding: 12px 0;

      &::-webkit-scrollbar {
        width: 3px;
      }
    }

    .article-item {
      padding: 8px 16px;

      .article-content {
        .article-title {
          font-size: 13px;
        }

        .article-meta {
          font-size: 11px;
        }
      }
    }
  }

  // 暗色模式适配
  @media (prefers-color-scheme: dark) {
    background: #1a1a1a;
    border-color: #333;
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);

    &:hover {
      box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
    }

    .section-header {
      background: #1a1a1a;
      border-color: #333;

      &:hover {
        background: #2a2a2a;
      }

      .section-title {
        color: #fff;

        .el-icon {
          color: #4fc3f7;
        }

        .article-count {
          color: #ccc;
          background: #333;
        }
      }

      .toggle-icon {
        color: #bbb;

        &:hover {
          color: #4fc3f7;
        }
      }
    }

    .articles-list {
      background: #1a1a1a;

      &::-webkit-scrollbar-thumb {
        background: #444;

        &:hover {
          background: #555;
        }
      }
    }

    .article-item {
      &:hover {
        background: #2a2a2a;
        border-left-color: #4fc3f7;
      }

      .article-content {
        .article-title {
          color: #fff;
        }

        .article-meta {
          color: #ccc;

          .separator {
            color: #666;
          }
        }
      }
    }
  }

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;

    &:hover {
      background: #f8f9fa;
    }

    .section-title {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      text-align: left;

      .el-icon {
        font-size: 18px;
        color: #1976d2;
      }

      .article-count {
        padding: 2px 6px;
        margin-left: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        background: #f5f5f5;
        border-radius: 10px;
      }
    }

    .toggle-icon {
      font-size: 14px;
      color: #999;
      transition: all 0.3s ease;

      &.expanded {
        transform: rotate(180deg);
      }

      &:hover {
        color: #1976d2;
      }
    }
  }

  .articles-list {
    max-height: 300px;
    padding: 16px 0;
    overflow-y: auto;
    background: #fff;
    border-radius: 0 0 8px 8px;

    // 自定义滚动条
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: #e0e0e0;
      border-radius: 2px;

      &:hover {
        background: #c0c0c0;
      }
    }
  }

  .article-item {
    padding: 12px 20px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;

    &:hover {
      background: #f8f9fa;
      border-left-color: #1976d2;
    }

    .article-content {
      .article-title {
        display: -webkit-box;
        margin: 0 0 8px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        color: #333;
        -webkit-box-orient: vertical;
      }

      .article-meta {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 12px;
        color: #999;

        .separator {
          color: #ddd;
        }
      }
    }
  }
}

.view-count,
.like-count {
  white-space: nowrap;
}
</style>
